<%
  locale = env.get("preferences").as(Preferences).locale
  dark_mode = env.get("preferences").as(Preferences).dark_mode
%>
<!DOCTYPE html>
<html lang="<%= locale %>">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%= yield_content "header" %>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=<%= ASSET_COMMIT %>">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=<%= ASSET_COMMIT %>">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=<%= ASSET_COMMIT %>">
    <link rel="manifest" href="/site.webmanifest?v=<%= ASSET_COMMIT %>">
    <link rel="mask-icon" href="/safari-pinned-tab.svg?v=<%= ASSET_COMMIT %>" color="#575757">
    <meta name="msapplication-TileColor" content="#575757">
    <meta name="theme-color" content="#575757">
    <link title="Invidious" type="application/opensearchdescription+xml" rel="search" href="/opensearch.xml">
    <link rel="stylesheet" href="/css/pure-min.css?v=<%= ASSET_COMMIT %>">
    <link rel="stylesheet" href="/css/grids-responsive-min.css?v=<%= ASSET_COMMIT %>">
    <link rel="stylesheet" href="/css/ionicons.min.css?v=<%= ASSET_COMMIT %>">
    <link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>">
    <link rel="stylesheet" href="/css/carousel.css?v=<%= ASSET_COMMIT %>">
    <script src="/js/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
</head>

<body class="<%= dark_mode.blank? ? "no" : dark_mode %>-theme">
    <span style="display:none" id="dark_mode_pref"><%= dark_mode %></span>
    <div class="pure-g">
        <div class="pure-u-1 pure-u-xl-20-24" id="contents">
            <div class="pure-g navbar h-box">
                <% if navbar_search %>
                    <div class="pure-u-1 pure-u-md-4-24">
                        <a href="/" class="index-link pure-menu-heading">Invidious</a>
                    </div>
                    <div class="pure-u-1 pure-u-md-12-24 searchbar">
                        <% autofocus = false %><%= rendered "components/search_box" %>
                    </div>
                <% end %>

                <div class="pure-u-1 pure-u-md-8-24 user-field">
                    <% if env.get? "user" %>
                        <div class="pure-u-1-4">
                            <a id="toggle_theme" href="/toggle_theme?referer=<%= env.get?("current_page") %>" class="pure-menu-heading" title="<%= translate(locale, "toggle_theme") %>">
                                <% if dark_mode == "dark" %>
                                    <i class="icon ion-ios-sunny"></i>
                                <% else %>
                                    <i class="icon ion-ios-moon"></i>
                                <% end %>
                            </a>
                        </div>
                        <div class="pure-u-1-4">
                            <a id="notification_ticker" title="<%= translate(locale, "Subscriptions") %>" href="/feed/subscriptions" class="pure-menu-heading">
                                <% notification_count = env.get("user").as(Invidious::User).notifications.size %>
                                <% if CONFIG.enable_user_notifications && notification_count > 0 %>
                                    <span id="notification_count"><%= notification_count %></span> <i class="icon ion-ios-notifications"></i>
                                <% else %>
                                    <i class="icon ion-ios-notifications-outline"></i>
                                <% end %>
                            </a>
                        </div>
                        <div class="pure-u-1-4">
                            <a title="<%= translate(locale, "Preferences") %>" href="/preferences?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
                                <i class="icon ion-ios-cog"></i>
                            </a>
                        </div>
                        <% if env.get("preferences").as(Preferences).show_nick %>
                            <div class="pure-u-1-4" style="overflow: hidden; white-space: nowrap;">
                                <span id="user_name"><%= HTML.escape(env.get("user").as(Invidious::User).email) %></span>
                            </div>
                        <% end %>
                        <div class="pure-u-1-4">
                            <form action="/signout?referer=<%= env.get?("current_page") %>" method="post">
                                <input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
                                <a class="pure-menu-heading" href="#">
                                    <input style="all:unset" type="submit" value="<%= translate(locale, "Log out") %>">
                                </a>
                            </form>
                        </div>
                    <% else %>
                        <div class="pure-u-1-3">
                            <a id="toggle_theme" href="/toggle_theme?referer=<%= env.get?("current_page") %>" class="pure-menu-heading" title="<%= translate(locale, "toggle_theme") %>">
                                <% if dark_mode == "dark" %>
                                    <i class="icon ion-ios-sunny"></i>
                                <% else %>
                                    <i class="icon ion-ios-moon"></i>
                                <% end %>
                            </a>
                        </div>
                        <div class="pure-u-1-3">
                            <a title="<%= translate(locale, "Preferences") %>" href="/preferences?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
                                <i class="icon ion-ios-cog"></i>
                            </a>
                        </div>
                        <% if CONFIG.login_enabled %>
                            <div class="pure-u-1-3">
                                <a href="/login?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
                                    <%= translate(locale, "Log in") %>
                                </a>
                            </div>
                        <% end %>
                    <% end %>
                </div>
            </div>

            <% if CONFIG.banner %>
                <div class="h-box">
                    <h3><%= CONFIG.banner %></h3>
                </div>
            <% end %>

            <%= content %>

            <footer>
                <div class="pure-g">
                    <div class="pure-u-1 pure-u-md-1-3">
                        <span>
                            <i class="icon ion-logo-github"></i>
                        <% if CONFIG.modified_source_code_url %>
                            <a href="https://github.com/iv-org/invidious"><%= translate(locale, "footer_original_source_code") %></a>&nbsp;/
                            <a href="<%= CONFIG.modified_source_code_url %>"><%= translate(locale, "footer_modfied_source_code") %></a>
                        <% else %>
                            <a href="https://github.com/iv-org/invidious"><%= translate(locale, "footer_source_code") %></a>
                        <% end %>
                        </span>
                        <span>
                            <i class="icon ion-ios-paper"></i>
                            <a href="https://github.com/iv-org/documentation"><%= translate(locale, "footer_documentation") %></a>
                        </span>
                    </div>

                    <div class="pure-u-1 pure-u-md-1-3">
                        <span>
                            <a href="https://github.com/iv-org/invidious/blob/master/LICENSE"><%= translate(locale, "Released under the AGPLv3 on Github.") %></a>
                        </span>
                        <span>
                            <i class="icon ion-logo-javascript"></i>
                            <a rel="jslicense" href="/licenses"><%= translate(locale, "View JavaScript license information.") %></a>
                        </span>
                        <span>
                            <i class="icon ion-ios-paper"></i>
                            <a href="/privacy"><%= translate(locale, "View privacy policy.") %></a>
                        </span>
                    </div>

                    <div class="pure-u-1 pure-u-md-1-3">
                        <span>
                            <i class="icon ion-ios-wallet"></i>
                            <a href="https://invidious.io/donate/"><%= translate(locale, "footer_donate_page") %></a>
                        </span>
                        <span><%= translate(locale, "Current version: ") %> <%= CURRENT_VERSION %>-<%= CURRENT_COMMIT %> @ <%= CURRENT_BRANCH %></span>
                    </div>
                </div>
            </footer>

        </div>
    </div>
    <script src="/js/handlers.js?v=<%= ASSET_COMMIT %>"></script>
    <script src="/js/themes.js?v=<%= ASSET_COMMIT %>"></script>
    <% if env.get? "user" %>
        <script src="/js/sse.js?v=<%= ASSET_COMMIT %>"></script>
        <script id="notification_data" type="application/json">
        <%=
        {
            "upload_text" => HTML.escape(translate(locale, "`x` uploaded a video")),
            "live_upload_text" => HTML.escape(translate(locale, "`x` is live"))
        }.to_pretty_json
        %>
        </script>
        <% if CONFIG.enable_user_notifications %>
        <script src="/js/notifications.js?v=<%= ASSET_COMMIT %>"></script>
        <% end %>
    <% end %>
</body>

</html>
